<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<style type="text/css">
		
		.box{
			position: absolute;
			top: 100px;
			left: 300px;
		}
		.box input{
			width: 80px;
			height: 40px;
			font-size: 20px;
			background: #ccc;
			color: #fff;
		}
		.box input.active{
			background: red;
		}
		.box div{
			border: 5px solid #FF0000;
			width: 200px;
			height: 200px;
			font-size: 50px;
			text-align: center;
			line-height: 200px;
			display: none;
		}
		.box div.show{
			display: block;
		}
	</style>
	<body>
		
		<div class="box" id="box">
			<input type="button"  id="" value="111" class="active input"/>
			<input type="button"  id="" value="222" class=" input"/>
			<input type="button"  id="" value="333" class=" input"/>
			
			<div class=" show" >111</div>
			<div>222</div>
			<div>333</div>
		</div>
		
	</body>
	<script>
		
//		function fnTab(ev){
//			var  = new Object
//			.oBox=document.getElementById(ev);
//			.oIpn=.oBox.getElementsByTagName('input');
//			.oDiv=.oBox.getElementsByTagName('div');
//			.say=function(){
//				for(var i=0;i<.oIpn.length;i++){
//				.oIpn[i].index=i;
//				.oIpn[i].onclick=function(){
//					for(var i=0;i<.oIpn.length;i++){
//						.oIpn[i].className='';
//						.oDiv[i].className='div';
//					}
//					this.className='active'
//					.oDiv[this.index].className='div show'
//				}
//				return ;
//		}
//			}
//		}
//		
//		var tab=fnTab("box");
//		tab.say();

 
 
         function fnTab(id){
			this.aBox=document.getElementById(id);
			this.aIpn=this.aBox.getElementsByTagName('input')
			this.aDiv=this.aBox.getElementsByTagName('div')
			this.iNow=0;
		}
         fnTab.prototype.init = function(){
         	var This = this;
         	for(var i=0;i<this.aIpn.length;i++){
         		this.aIpn[i].index = i ;
         		this.aIpn[i].onclick=function(){
         			This.change(this)
         		}
         	}
         }
         fnTab.prototype.change = function(obj){
         	for(var i=0;i<this.aIpn.length;i++){
         		this.aIpn[i].className="";
         		this.aDiv[i].className="";
         	}
         	obj.className="active";
         	this.aDiv[obj.index].className="show"
         }
         window.onload =function(){
         	var t1 = new fnTab("box");
         	t1.init()
         }
		
		
	</script>
</html>
